// 这个文件是用来写路由配置的,在这个页面中相应的路由下注册相应的组件,然后地址栏访问哪个路由就通过app.vue中的<router-view></router-view>将相应的组件引入到app.vue中,以此达到访问不同路由显示不同页面
import Vue from 'vue'
import VueRouter from 'vue-router'
import Footer from '@/components/footer.vue' // 引入底部组件,用于按需注册显示该组件

Vue.use(VueRouter)

// 配置路由规则,注意路由的匹配规则是从上到下的,只要是匹配到了就不会再继续向下匹配了
// 在这里重新配置路由文件
const routes = [
  // 路由的重定向,当访问 '/' 的时候将路由指向 其他路由
  // 因为路由的匹配规则是从上到下的,所以说访问根目录的路由重定向需要放在最上边
  {
    path: '/',
    redirect: '/Welcome'
  },
  { // 欢迎以及引导页面
    path: '/Welcome',
    name: 'Welcome',
    component: () => import('@/views/Welcome/index.vue')
  },
  { // 明细
    path: '/home', // 地址栏输入的那个网址,当路由中检测到访问的是'/home'的时候就将页面引导至这里
    name: 'home', // 起的名字 -- 命名路由,这个命名路由主要是用于给url地址栏中栏中路由拼接使用的,详情请见首页列表点击向详情页跳转的功能
    // 当前地址栏输入这个网址时，你需要显示的是哪一个页面
    // 路由的懒加载
    // component 注册单个组件(只能注册一个默认的组件)
    // components 注册多个组件(一个默认组件,其余组件(由view层中使用的name来识别)),详情请见将footer组件引入到首页中,然后在路由中设置其是否需要显示出来
    components: {
      // 1.注册的默认组件,在需要显示的view层中使用<router-view></router-view>来显示出来
      default: () => import('@/views/home/index'),
      // 2.注册的其他组件,由name值来识别,在底层view中使用<router-view name="name名"></router-view>调用出来之后,由路由中是否注册这个组件来控制其是否需要显示出来
      footer: Footer
    }
  },
  { // 图表
    path: '/SelectionIcon',
    name: 'SelectionIcon',
    components: {
      default: () => import('@/views/SelectionIcon/index'),
      footer: Footer
    }
  },
  { // 记账
    path: '/AddTo',
    name: 'AddTo',
    components: {
      default: () => import('@/views/AddTo/index'),
      footer: Footer
    }
  },
  { // 社区
    path: '/Community',
    name: 'Community',
    components: {
      default: () => import('@/views/Community/index'),
      footer: Footer
    }
  },
  {
    path: '/Community/stranger',
    name: 'stranger',
    component: () => import('@/views/Community/stranger')
  },
  {
    path: '/Community/details',
    name: 'details',
    component: () => import('@/views/Community/postDetails')
  },
  {
    path: '/Community/sendpost',
    name: 'sendpost',
    component: () => import('@/views/Community/sendPost'),
    meta: {
      keepAlive: true // 需要被缓存
    }
  },
  {
    path: '/Community/preview',
    name: 'preview',
    component: () => import('@/components/community/preview'),
    meta: {
      keepAlive: true // 需要被缓存
    }
  },
  {
    path: '/Community/addAddressTag',
    name: 'addAddressTag',
    component: () => import('@/components/community/addAddressTag')
  },
  {
    path: '/Community/addCustomizeTag',
    name: 'addCustomizeTag',
    component: () => import('@/components/community/addCustomizeTag')
  },
  {
    path: '/Community/addBrandTag',
    name: 'addBrandTag',
    component: () => import('@/components/community/addBrandTag')
  },
  {
    path: '/Community/topic',
    name: 'topic',
    component: () => import('@/components/community/topic')
  },
  { // 我的(个人中心)相关页面
    path: '/my',
    name: 'my',
    components: {
      default: () => import('@/views/my/index'),
      footer: Footer
    }
  },
  { // 我的点击头像进入的个人信息修改页面
    path: '/my_Personal',
    name: 'my_Personal',
    component: () => import('@/views/my_Personal/index.vue')
  },
  { // 更改手机号页面
    path: '/my_Personal_Tel',
    name: 'my_Personal_Tel',
    component: () => import('@/views/my_Personal_Tel/index.vue')
  },
  { // 消息页面
    path: '/my_news',
    name: 'my_news',
    component: () => import('@/views/my_news/index.vue')
  },
  { // 账单页面
    path: '/my_bill',
    name: 'my_bill',
    component: () => import('@/views/my_bill/index.vue')
  },
  { // 预算页面
    path: '/my_budget',
    name: 'my_budget',
    component: () => import('@/views/my_budget/index.vue')
  },
  { // 存钱计划页面
    path: '/my_SavingPlan',
    name: 'my_SavingPlan',
    component: () => import('@/views/my_SavingPlan/index.vue')
  },
  { // 消息页面中系统通知
    path: '/my_news/SystemNotifictionFn',
    name: 'SystemNotifictionFn',
    component: () => import('@/views/my_news/SystemNotifictionFn/index.vue')
  },
  { // 消息页面中评论
    path: '/my_news/comment',
    name: 'comment',
    component: () => import('@/views/my_news/comment/index.vue')
  },
  { // 消息页面中新增关注
    path: '/my_news/NewlyAdded',
    name: 'NewlyAdded',
    component: () => import('@/views/my_news/NewlyAdded/index.vue')
  },
  { // 设置页面
    path: '/my_SetUp',
    name: 'my_SetUp',
    component: () => import('@/views/my_SetUp/index.vue')
  },
  { // 设置页面中的类别设置
    path: '/my_SetUp/CategorySettings',
    name: 'my_SetUp',
    component: () => import('@/views/my_SetUp/CategorySettings/index.vue')
  },
  { // 设置页面中帮助页面
    path: '/my_SetUp/help',
    name: 'my_SetUp',
    component: () => import('@/views/my_SetUp/help/index.vue')
  },
  { // 设置页面中关注微信公众号
    path: '/my_SetUp/follow',
    name: 'my_SetUp',
    component: () => import('@/views/my_SetUp/follow/index.vue')
  },
  { // 设置页面中定时页面my_InviteFriends
    path: '/my_Timed_Reminder',
    name: 'my_Timed_Reminder',
    component: () => import('@/views/my_Timed_Reminder/index.vue')
  },
  { // 设置页面中邀请好友页面
    path: '/my_InviteFriends',
    name: 'my_InviteFriends',
    component: () => import('@/views/my_InviteFriends/index.vue')
  },
  { // 登录加注册
    path: '/loginAndregister',
    name: 'loginAndregister',
    // component: () => import('@/views/loginAndregister/index.vue')
    components: {
      default: () => import('@/views/loginAndregister/index')
    }
  },
  { // 用户隐私协议
    path: '/UserAgreement',
    name: 'UserAgreement',
    components: {
      default: () => import('@/views/UserAgreement/index')
    }
  },
  { // 正在开发,敬请期待页面
    path: '/ComingSoon',
    name: 'ComingSoon',
    component: () => import('@/views/ComingSoon/index.vue')
  },
  {
    // 因为是有时地址栏的访问中会出现不是我们路由指定的其他乱七八糟的路由,这时候我们就需要一个404的页面来容错,但是这个404页面是需要我们模糊匹配的,不只是那一条的,所以呢根据我们路由的匹配规则从上到下一一匹配,只要匹配到了就不会继续往下了,所以呢我们将这个模糊匹配所有路径的路由放在最末尾,当所有的路由选项都匹配不到的情况下,我们就可以匹配道这个最后一条的模糊匹配所有路由的地方了
    path: '*',
    name: 'notfound',
    component: () => import('@/views/notfound/index.vue')
  }
]

const router = new VueRouter({
  mode: 'hash', // 线下的时候用的history 上线以后要改为hash
  base: process.env.BASE_URL,
  routes
})

export default router
